{% extends "base.html" %}

{% block title %}{{ activity.title }} - 校园活动详情{% endblock %}

{% block css %}
<style>
    .activity-header {
        background-size: cover;
        background-position: center;
        height: 400px;
        position: relative;
        display: flex;
        align-items: flex-end;
        border-radius: 0.5rem;
        overflow: hidden;
    }
    .activity-header::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0.8));
    }
    .activity-header-content {
        position: relative;
        padding: 2rem;
        color: white;
        width: 100%;
    }
    .activity-meta-info {
        display: flex;
        flex-wrap: wrap;
        gap: 1.5rem;
        margin: 1rem 0;
    }
    .meta-item {
        display: flex;
        align-items: center;
    }
    .meta-item i {
        margin-right: 0.5rem;
        font-size: 1.25rem;
    }
    .activity-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        margin-top: 1rem;
    }
    .section-title {
        font-size: 1.25rem;
        font-weight: 600;
        margin-bottom: 1rem;
        padding-bottom: 0.5rem;
        border-bottom: 2px solid #e9ecef;
    }
    .organizer-card {
        background-color: #f8f9fa;
        border-radius: 0.5rem;
        padding: 1.5rem;
        display: flex;
        align-items: center;
        gap: 1rem;
    }
    .organizer-avatar {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background-color: #e9ecef;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        font-weight: 600;
        color: #495057;
    }
    .comment-form {
        background-color: #f8f9fa;
        border-radius: 0.5rem;
        padding: 1.5rem;
        margin-bottom: 2rem;
    }
    .comment-item {
        border-bottom: 1px solid #e9ecef;
        padding: 1rem 0;
    }
    .comment-item:last-child {
        border-bottom: none;
    }
    .comment-avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: #e9ecef;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
        font-weight: 500;
        color: #495057;
    }
    .comment-content {
        margin-left: 1rem;
        flex-grow: 1;
    }
    .comment-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0.5rem;
    }
    .comment-author {
        font-weight: 600;
        color: #495057;
    }
    .comment-time {
        font-size: 0.875rem;
        color: #6c757d;
    }
    .comment-text {
        color: #212529;
    }
    .related-activity-card {
        border-radius: 0.5rem;
        overflow: hidden;
        transition: transform 0.2s, box-shadow 0.2s;
        height: 100%;
        display: flex;
        flex-direction: column;
    }
    .related-activity-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    }
    .related-activity-image {
        height: 120px;
        overflow: hidden;
    }
    .related-activity-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s;
    }
    .related-activity-card:hover .related-activity-image img {
        transform: scale(1.1);
    }
    .related-activity-content {
        padding: 1rem;
        flex-grow: 1;
        display: flex;
        flex-direction: column;
    }
    .related-activity-title {
        font-weight: 600;
        color: #495057;
        margin-bottom: 0.5rem;
        flex-grow: 1;
    }
    .related-activity-date {
        font-size: 0.875rem;
        color: #6c757d;
    }
    .category-badge {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
        border-radius: 1rem;
        background-color: #f8f9fa;
        color: #6c757d;
        margin-right: 0.25rem;
        margin-bottom: 0.25rem;
    }
    .map-container {
        height: 250px;
        background-color: #e9ecef;
        border-radius: 0.5rem;
        margin-bottom: 1.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .countdown-timer {
        display: flex;
        justify-content: center;
        gap: 1rem;
        margin: 1.5rem 0;
    }
    .countdown-item {
        text-align: center;
    }
    .countdown-number {
        font-size: 1.5rem;
        font-weight: 700;
        color: #495057;
        background-color: #f8f9fa;
        border-radius: 0.25rem;
        padding: 0.5rem 0.75rem;
        display: block;
    }
    .countdown-label {
        font-size: 0.75rem;
        color: #6c757d;
        margin-top: 0.25rem;
    }
    .registration-stats {
        display: flex;
        justify-content: space-around;
        background-color: #f8f9fa;
        border-radius: 0.5rem;
        padding: 1.5rem;
        margin-bottom: 2rem;
    }
    .stat-item {
        text-align: center;
    }
    .stat-number {
        font-size: 1.5rem;
        font-weight: 700;
        color: #007bff;
    }
    .stat-label {
        font-size: 0.875rem;
        color: #6c757d;
    }
</style>
{% endblock %}

{% block content %}
<!-- 活动头部信息 -->
<div class="activity-header mb-6" style="background-image: url('{{ activity.image_url or 'https://via.placeholder.com/1200x600?text=活动图片' }}')">
    <div class="activity-header-content">
        <div class="flex flex-wrap items-center gap-2 mb-2">
            <span class="category-badge">{{ activity.category }}</span>
            {% if activity.is_important %}
            <span class="category-badge bg-danger text-white">重要活动</span>
            {% endif %}
            {% if activity.is_recommended %}
            <span class="category-badge bg-primary text-white">推荐活动</span>
            {% endif %}
        </div>
        <h1 class="text-3xl font-bold mb-1">{{ activity.title }}</h1>
        <div class="activity-meta-info">
            <div class="meta-item">
                <i class="fa fa-calendar"></i>
                <span>{{ activity.start_date.strftime('%Y-%m-%d %H:%M') if activity.start_date else '未设置' }} {% if activity.end_date %}- {{ activity.end_date.strftime('%H:%M') }}{% endif %}</span>
            </div>
            <div class="meta-item">
                <i class="fa fa-map-marker"></i>
                <span>{{ activity.location or '未设置' }}</span>
            </div>
            <div class="meta-item">
                <i class="fa fa-user"></i>
                <span>限额: {{ activity.max_participants or '无限制' }}</span>
            </div>
            <div class="meta-item">
                <i class="fa fa-eye"></i>
                <span>{{ activity.views }} 次浏览</span>
            </div>
        </div>
        <div class="activity-actions">
            {% if current_user.is_authenticated %}
                {% if current_user in activity.participants %}
                <button class="btn btn-secondary" disabled>
                    <i class="fa fa-check mr-2"></i>已报名参加
                </button>
                {% else %}
                <button class="btn btn-primary">
                    <i class="fa fa-calendar-plus-o mr-2"></i>立即报名
                </button>
                {% endif %}
                <button class="btn btn-outline-light">
                    <i class="fa fa-heart-o mr-2"></i>
                    {{ activity.likes }} 喜欢
                </button>
                <button class="btn btn-outline-light">
                    <i class="fa fa-share-alt mr-2"></i>
                    分享
                </button>
            {% else %}
            <a href="{{ url_for('login') }}" class="btn btn-primary">
                <i class="fa fa-user-o mr-2"></i>登录后参与
            </a>
            {% endif %}
        </div>
    </div>
</div>

<!-- 消息提示区域 -->
{% with messages = get_flashed_messages(with_categories=true) %}
    {% if messages %}
        {% for category, message in messages %}
            <div class="alert alert-{{ category }} fade-in mb-4" role="alert">
                <button type="button" class="close" data-bs-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                {{ message }}
            </div>
        {% endfor %}
    {% endif %}
{% endwith %}

<!-- 活动倒计时 -->
{% if activity.start_date %}
<div class="bg-white rounded-lg shadow-sm p-4 mb-6">
    <h3 class="text-lg font-semibold text-center mb-2">活动倒计时</h3>
    <div class="countdown-timer">
        <div class="countdown-item">
            <span class="countdown-number" id="days">00</span>
            <span class="countdown-label">天</span>
        </div>
        <div class="countdown-item">
            <span class="countdown-number" id="hours">00</span>
            <span class="countdown-label">时</span>
        </div>
        <div class="countdown-item">
            <span class="countdown-number" id="minutes">00</span>
            <span class="countdown-label">分</span>
        </div>
        <div class="countdown-item">
            <span class="countdown-number" id="seconds">00</span>
            <span class="countdown-label">秒</span>
        </div>
    </div>
</div>
{% endif %}

<!-- 活动主体内容 -->
<div class="row">
    <!-- 左侧主要内容 -->
    <div class="col-lg-8">
        <!-- 活动详情 -->
        <div class="bg-white rounded-lg shadow-sm p-6 mb-6">
            <h2 class="section-title">
                <i class="fa fa-info-circle mr-2 text-primary"></i>活动详情
            </h2>
            <div class="activity-description">
                {{ activity.description | safe }}
            </div>
            
            {% if activity.details %}
            <div class="mt-4">
                {{ activity.details | safe }}
            </div>
            {% endif %}
        </div>
        
        <!-- 活动地点 -->
        {% if activity.location %}
        <div class="bg-white rounded-lg shadow-sm p-6 mb-6">
            <h2 class="section-title">
                <i class="fa fa-map-o mr-2 text-primary"></i>活动地点
            </h2>
            <p class="mb-3">{{ activity.location }}</p>
            <div class="map-container">
                <i class="fa fa-map-marker text-5xl text-primary"></i>
            </div>
            <div class="text-center">
                <a href="#" class="text-primary">
                    <i class="fa fa-external-link mr-1"></i>在地图中查看
                </a>
            </div>
        </div>
        {% endif %}
        
        <!-- 活动日程 -->
        {% if activity.schedule %}
        <div class="bg-white rounded-lg shadow-sm p-6 mb-6">
            <h2 class="section-title">
                <i class="fa fa-calendar-check-o mr-2 text-primary"></i>活动日程
            </h2>
            <div class="schedule-timeline">
                {{ activity.schedule | safe }}
            </div>
        </div>
        {% endif %}
        
        <!-- 评论区 -->
        <div class="bg-white rounded-lg shadow-sm p-6">
            <h2 class="section-title">
                <i class="fa fa-comments-o mr-2 text-primary"></i>评论区
            </h2>
            
            <!-- 评论表单 -->
            {% if current_user.is_authenticated %}
            <div class="comment-form mb-6">
                <h3 class="text-md font-semibold mb-3">发表评论</h3>
                <form method="POST" action="{{ url_for('add_comment', activity_id=activity.id) }}">
                    {{ form.hidden_tag() }}
                    <div class="mb-3">
                        {{ form.content(class="form-control", rows=4, placeholder="分享你的想法...") }}
                    </div>
                    <div class="flex justify-end">
                        <button type="submit" class="btn btn-primary">
                            <i class="fa fa-paper-plane-o mr-2"></i>发布评论
                        </button>
                    </div>
                </form>
            </div>
            {% else %}
            <div class="text-center py-4 bg-light rounded">
                <p>请先<a href="{{ url_for('login') }}" class="text-primary">登录</a>后发表评论</p>
            </div>
            {% endif %}
            
            <!-- 评论列表 -->
            {% if comments %}
                {% for comment in comments %}
                <div class="comment-item">
                    <div class="d-flex">
                        <div class="comment-avatar">
                            {{ comment.user.username[:1] | upper }}
                        </div>
                        <div class="comment-content">
                            <div class="comment-header">
                                <div class="comment-author">{{ comment.user.username }}</div>
                                <div class="comment-time">{{ comment.created_at.strftime('%Y-%m-%d %H:%M') }}</div>
                            </div>
                            <div class="comment-text">
                                {{ comment.content }}
                            </div>
                        </div>
                    </div>
                </div>
                {% endfor %}
            {% else %}
            <div class="text-center py-6">
                <i class="fa fa-comments-o text-3xl text-gray-300 mb-2"></i>
                <p class="text-gray-500">暂无评论，来发表第一条评论吧！</p>
            </div>
            {% endif %}
        </div>
    </div>
    
    <!-- 右侧侧边栏 -->
    <div class="col-lg-4">
        <!-- 活动参与统计 -->
        <div class="bg-white rounded-lg shadow-sm p-6 mb-6">
            <h2 class="section-title">
                <i class="fa fa-bar-chart mr-2 text-primary"></i>参与统计
            </h2>
            <div class="registration-stats">
                <div class="stat-item">
                    <div class="stat-number">{{ activity.participants | length }}</div>
                    <div class="stat-label">已报名</div>
                </div>
                <div class="stat-item">
                    <div class="stat-number">{{ activity.likes }}</div>
                    <div class="stat-label">喜欢</div>
                </div>
                <div class="stat-item">
                    <div class="stat-number">{{ activity.comments | length }}</div>
                    <div class="stat-label">评论</div>
                </div>
            </div>
        </div>
        
        <!-- 活动组织者 -->
        <div class="bg-white rounded-lg shadow-sm p-6 mb-6">
            <h2 class="section-title">
                <i class="fa fa-user-circle mr-2 text-primary"></i>活动组织者
            </h2>
            <div class="organizer-card">
                <div class="organizer-avatar">
                    {{ activity.organizer[:1] | upper }}
                </div>
                <div>
                    <div class="font-semibold text-gray-800">{{ activity.organizer }}</div>
                    {% if activity.organizer_contact %}
                    <div class="text-gray-600 text-sm mt-1">
                        <i class="fa fa-envelope-o mr-1"></i>{{ activity.organizer_contact }}
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
        
        <!-- 重要提示 -->
        {% if activity.important_notes %}
        <div class="bg-warning text-white rounded-lg shadow-sm p-6 mb-6">
            <h2 class="section-title text-white">
                <i class="fa fa-exclamation-triangle mr-2"></i>重要提示
            </h2>
            <div>
                {{ activity.important_notes }}
            </div>
        </div>
        {% endif %}
        
        <!-- 相关活动 -->
        <div class="bg-white rounded-lg shadow-sm p-6">
            <h2 class="section-title">
                <i class="fa fa-thumbs-o-up mr-2 text-primary"></i>相关活动
            </h2>
            <div class="space-y-4">
                {% if related_activities %}
                    {% for related_activity in related_activities %}
                    <a href="{{ url_for('activity_detail', id=related_activity.id) }}" class="related-activity-card bg-white shadow-sm">
                        <div class="related-activity-image">
                            <img src="{{ related_activity.image_url or 'https://via.placeholder.com/400x200?text=活动图片' }}" alt="{{ related_activity.title }}">
                        </div>
                        <div class="related-activity-content">
                            <div class="related-activity-title line-clamp-2">{{ related_activity.title }}</div>
                            <div class="related-activity-date">
                                <i class="fa fa-calendar-o mr-1"></i>
                                {{ related_activity.start_date.strftime('%Y-%m-%d') if related_activity.start_date else '未设置' }}
                            </div>
                        </div>
                    </a>
                    {% endfor %}
                {% else %}
                <div class="text-center py-4 bg-light rounded">
                    <p class="text-gray-500">暂无相关活动</p>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block js %}
<script>
    // 活动倒计时功能
    {% if activity.start_date %}
    function updateCountdown() {
        const now = new Date();
        const eventDate = new Date("{{ activity.start_date.strftime('%Y-%m-%d %H:%M:%S') }}");
        const timeDiff = eventDate - now;
        
        // 如果活动已经开始，显示活动进行中
        if (timeDiff <= 0) {
            document.querySelector('.countdown-timer').innerHTML = 
                '<div class="text-center w-full"><span class="px-4 py-2 bg-success text-white rounded">活动进行中</span></div>';
            return;
        }
        
        const days = Math.floor(timeDiff / (1000 * 60 * 60 * 24));
        const hours = Math.floor((timeDiff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        const minutes = Math.floor((timeDiff % (1000 * 60 * 60)) / (1000 * 60));
        const seconds = Math.floor((timeDiff % (1000 * 60)) / 1000);
        
        document.getElementById('days').textContent = days.toString().padStart(2, '0');
        document.getElementById('hours').textContent = hours.toString().padStart(2, '0');
        document.getElementById('minutes').textContent = minutes.toString().padStart(2, '0');
        document.getElementById('seconds').textContent = seconds.toString().padStart(2, '0');
    }
    
    // 初始更新一次
    updateCountdown();
    // 每秒更新一次
    setInterval(updateCountdown, 1000);
    {% endif %}
    
    // 平滑滚动到评论区
    document.querySelectorAll('a[href="#comments"]').forEach(anchor => {
        anchor.addEventListener('click', function(e) {
            e.preventDefault();
            document.getElementById('comments').scrollIntoView({ behavior: 'smooth' });
        });
    });
    
    // 喜欢按钮点击效果
    const likeButton = document.querySelector('button:has(.fa-heart-o)');
    if (likeButton) {
        likeButton.addEventListener('click', function() {
            const icon = this.querySelector('i');
            if (icon.classList.contains('fa-heart-o')) {
                icon.classList.remove('fa-heart-o');
                icon.classList.add('fa-heart');
                this.classList.remove('btn-outline-light');
                this.classList.add('btn-danger');
                
                // 更新喜欢数量
                const likeCountText = this.textContent.trim();
                const likeCount = parseInt(likeCountText.match(/\d+/)[0]);
                this.innerHTML = `<i class="fa fa-heart mr-2"></i>${likeCount + 1} 喜欢`;
            } else {
                icon.classList.remove('fa-heart');
                icon.classList.add('fa-heart-o');
                this.classList.remove('btn-danger');
                this.classList.add('btn-outline-light');
                
                // 更新喜欢数量
                const likeCountText = this.textContent.trim();
                const likeCount = parseInt(likeCountText.match(/\d+/)[0]);
                this.innerHTML = `<i class="fa fa-heart-o mr-2"></i>${likeCount - 1} 喜欢`;
            }
        });
    }
    
    // 分享按钮点击效果
    const shareButton = document.querySelector('button:has(.fa-share-alt)');
    if (shareButton) {
        shareButton.addEventListener('click', function() {
            alert('分享功能已触发，复制活动链接到剪贴板');
            // 实际项目中可以实现复制链接到剪贴板的功能
        });
    }
    
    // 评论表单提交效果
    const commentForm = document.querySelector('form[action="{{ url_for('add_comment', activity_id=activity.id) }}"]');
    if (commentForm) {
        commentForm.addEventListener('submit', function(e) {
            const content = this.querySelector('textarea').value.trim();
            if (!content) {
                e.preventDefault();
                alert('评论内容不能为空');
            }
        });
    }
    
    // 页面加载动画效果
    document.addEventListener('DOMContentLoaded', function() {
        const sections = document.querySelectorAll('.bg-white');
        sections.forEach((section, index) => {
            setTimeout(() => {
                section.style.opacity = '1';
                section.style.transform = 'translateY(0)';
            }, 100 * index);
        });
    });
</script>
{% endblock %}